import React from 'react'
import style from './style'
import Link from '../link'
import Lightbox from './Lightbox'
import cx from 'classnames'

export default
class Gallery extends React.Component {

  state = {
    lightboxIsOpen: false,
    currentImage: null
  }

  static propsType = {
    images: React.PropTypes.array,
    onLoad: React.PropTypes.func,
    margin: React.PropTypes.number,
    width: React.PropTypes.number,
    column: React.PropTypes.number,
    max: React.PropTypes.number
  }

  static defaultProps = {
    // 图片间距
    margin: "3",
    // 图片宽度
    // 高度默认相同
    width: "82",
    // 一行展示
    column: "3",
    // 最大数量
    max: "9",
    onLoad: () => {}
  }

  closeLightbox() {
    this.setState({
      lightboxIsOpen: false
    })
  }

  openLightbox() {
    this.setState({
      lightboxIsOpen: true
    })
  }

  handleClick(currentImage) {
    this.setState({
      currentImage
    })

    this.openLightbox()
  }

  renderImage(img, i) {
    const { width, margin, column, images, max } = this.props
    const height = this.props.height || width
    return (
      <li 
        className={style.item}
        key={i}
        ref={c => {
          if (c) {
            setTimeout(() => {
              c.children[0].classList.remove('animated')
            }, 1100)
          }
        }}
        style={{
          marginLeft: i%column === 0? 0: `${margin}px`,
          marginTop: i<column? 0: `${margin}px`
        }}
      >
        <Link
          onClick={() => this.handleClick(i)}
          className='animated fadeIn'
          style={{
            backgroundImage: `url(${img.thumbnail})`,
            width: `${width}px`,
            height: `${height}px`,
            animationDelay: `${(i+1)*70}ms`
          }}
        >
          {
            (images.length > max && i == max-1)? 
            <span className={style.lastTip}>共{ images.length }张</span>: null
          }
        </Link>
      </li>
    )
  }

  renderGallary() {
    const { width, column, margin, max } = this.props
    let { images } = this.props
    if (!images.length) return null
    // 展示固定数目
    images = images.slice(0, max)
    return (
      <ul 
        className={style.gallery}
        style={{
          maxWidth: `${width * column + (column-1)* margin}px`
        }}
      >
        {
          images.map(::this.renderImage)
        }
      </ul>
    )
  }

  previous() {
    this.setState({
      currentImage: this.state.currentImage-1
    })
  }

  next() {
    this.setState({
      currentImage: this.state.currentImage+1
    })
  }

  render() {
    return (
      <div className={cx(style.root, {
        [this.props.className]: this.props.className
      })}>
        {
          this.renderGallary()
        }
        {
          this.props.images.length?
          <Lightbox
            currentImage={this.state.currentImage}
            onLoad={this.props.onLoad}
            onPrev={::this.previous}
            onNext={::this.next}
            images={this.props.images}
            onClose={::this.closeLightbox}
            active={this.state.lightboxIsOpen}
          />: null
        }
      </div>
    )
  }
}
